<template>
  <view class="warp">
    <button class="btn" @click="handleOpenPopup">
      <img class="icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/callIcon2.png" alt="" />
      <text class="text">联系服务商申请补贴</text>
    </button>

    <UniPopup ref="contactWay">
      <view class="contact-way">
        <view class="contact-way__title">
          <text>联系服务商</text>
        </view>
        <view class="contact-way__content">
          <view
            v-if="result?.name && result.mobile"
            class="contact-way__item"
            @click="makePhoneCall(result?.mobile)"
          >
            <view class="item-info">
              <img class="item-info__avatar" :src="result.avatar" alt="" />
              <view>
                <view class="item-info__line1">
                  <view class="item-info__name text-overflow-1">{{ result.name }}</view>
                  <view class="item-info__tag">官方认证</view>
                </view>
                <view class="item-info__phone">{{ result.mobile }}</view>
              </view>
            </view>
            <view class="ali-icon">&#xe678;</view>
          </view>
          <view class="item-desc">
            {{ result?.desc }}
          </view>
        </view>
      </view>
    </UniPopup>

    <!-- <UniPopup ref="attachPopup">
      <view class="attach-info">
        <view class="attach-info_item">
          <text class="attach-info_label">服务专员</text>
          <text>{{ result?.name }}</text>
        </view>
        <view class="attach-info_item">
          <text class="attach-info_label">专员电话</text>
          <text class="attach-info_phone" @click="makingCalls">{{ result?.mobile }}</text>
        </view>
      </view>
    </UniPopup> -->
  </view>
</template>

<script lang="ts" setup>
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { serviceProvider } from '@/api/membership';
  import { ServiceProviderResult } from '@/api/membership/types';
  import { getCurrentInstance, ref } from 'vue';
  import { Toast } from '@/utils';

  const _this = getCurrentInstance();
  const result = ref<ServiceProviderResult>();
  async function getServiceProvider() {
    let res = await serviceProvider(1);
    result.value = res;
  }
  
  async function handleOpenPopup() {
    try {
      await getServiceProvider();
      (_this?.refs.contactWay as any).open('center');
    } catch (error) {
      Toast('获取联系方式失败', 'none', 1500);
    }
    
  }

  const closePopup = (ref: string = 'contactWay', direction: string = 'center') => {
    (_this?.refs[ref] as any).close(direction);
  };

  function makePhoneCall(mobile: any) {
    serviceProvider(2)
    uni.makePhoneCall({ phoneNumber: mobile, success: () => closePopup() });
  }
</script>

<style lang="scss" scoped>
  .warp {
    background-color: #fff;
    padding-bottom: 40rpx;
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 692rpx;
      height: 96rpx;
      background-color: #e9e3b5;
      border-radius: 20rpx;
      .icon {
        width: 42rpx;
        height: 42rpx;
      }
      .text {
        font-size: 31rpx;
        color: #333;
        margin-left: 15rpx;
      }
    }
    .btn::after {
      border: none;
    }
  }
  .contact-way {
    background-color: #fff;
    width: calc(100vw - 60rpx);
    border-radius: 20rpx;
    &__title {
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      color: #333;
      font-weight: bolder;
      font-size: 32rpx;
    }
    &__item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 40rpx;
      padding: 30rpx 0;
      border-bottom: 1px solid #dddddd;
      .item-info {
        display: flex;
        align-items: center;
        &__avatar {
          width: 120rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 22rpx;
        }
        &__line1{
          display: flex;
          align-items: center;
          margin-bottom: 12rpx;
        }
        &__name {
          color: #333;
          font-size: 32rpx;
          
        }
        &__tag{
          width: 128rpx;
          height: 34rpx;
          text-align: center;
          line-height: 34rpx;
          color: #333333;
          font-size: 24rpx;
          background: #ECE2C7;
          border-radius: 17rpx;
          margin-left: 10rpx;
        }
        &__phone {
          color: #aaabab;
          font-size: 28rpx;
        }
      }
      
      .ali-icon {
        font-size: 40rpx;
        transform: rotateZ(270deg);
      }
    }
    .item-desc{
      font-size: 28rpx;
      color: #333333;
      padding: 14rpx 32rpx 56rpx 44rpx;

    }
  }
</style>
